<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="title">用户登录</view>
				<view class="tabs">
					<view class="tabs-items">
						<view :class="['tabs-item', activ===1?'activ':'']">
							<image class="activ-bg" src="https://lvshi.haidanet.com/uni-static/user/img/tab-activ.png">
							</image>
							<view class="text" @click="setTab(1)">验证码登录</view>
						</view>
						<view :class="['tabs-item', activ===2?'activ':'']">
							<image class="activ-bg" src="https://lvshi.haidanet.com/uni-static/user/img/tab-activ.png">
							</image>
							<view class="text" @click="setTab(2)">密码登录</view>
						</view>
					</view>
					<view :class="['tabs-body',activ===1?'left':'right']">
						<view class="form">
							<wd-form ref="formRef" :model="formData" v-if="activ === 2">
								<wd-input :use-prefix-slot="true" custom-class="wd-input-custom-class-fd-col round"
									label="手机号" prop="phone" clearable v-model="formData.phone" placeholder="请输入手机号">
									<template #prefix>
										<text class="iconfont icon-shoujihaoma"></text>
									</template>
								</wd-input>
								<wd-input :use-prefix-slot="true" custom-class="wd-input-custom-class-fd-col round"
									label="密码" prop="password" show-password clearable v-model="formData.password"
									placeholder="请输入密码">
									<template #prefix>
										<text class="iconfont icon-mima"></text>
									</template>
								</wd-input>
							</wd-form>
							<wd-form ref="formRef" :model="formData" v-if="activ === 1">
								<wd-input :use-prefix-slot="true" custom-class="wd-input-custom-class-fd-col round"
									label="手机号" prop="phone" clearable v-model="formData.phone" placeholder="请输入手机号">
									<template #prefix>
										<text class="iconfont icon-shoujihaoma"></text>
									</template>
								</wd-input>
								<wd-input :use-prefix-slot="true" :use-suffix-slot="true"
									custom-class="wd-input-custom-class-fd-col round" label="验证码" prop="code" clearable
									v-model="formData.code" placeholder="请输入验证码">
									<template #prefix>
										<text class="iconfont icon-yanzhengma"></text>
									</template>
									<template #suffix>
										<wd-button :disabled="status === 2" type="text" @click="getVerificationCode"
											custom-class="wd-button-custom-class-verification-code wd-button-custom-class-link">{{ tips }}</wd-button>
									</template>
								</wd-input>
							</wd-form>
							<!-- 		<view class="forgot-password">
								忘记密码？
							</view> -->
							<view class="submit-btn" @click="doLogin">
								<wd-button type="success"
									custom-class="wd-button-custom-class-my-success wd-button-custom-class-w100">登录</wd-button>
							</view>
						</view>
					</view>
				</view>
				<view class="tripartite">
					<image @click="wxLogin" src="@/commonPage/static/img/wx-icon.png"></image>
				</view>
				<view class="protocol">
					<wd-checkbox checked-color="rgba(201, 28, 31, 1)" :modelValue="protocol" @change="checkboxChange"
						shape="square">
						请阅读并同意
						<text class="wd-button-custom-class-link" @click="goProtocolPage">《隐私协议和用户协议》</text>

					</wd-checkbox>
				</view>
				<view class="register" @click="goRegister">
					还没有账号？去注册
				</view>
			</view>
		</wd-config-provider>
	</app-page>
	<!-- <wd-toast /> -->
</template>

<script lang="ts">
	import { defineComponent, ref } from "vue";
	import useVerificationCode from "@/hooks/useVerificationCode.ts";
	import useRouter from "@/hooks/useRouter.ts";
	import { useUserStore } from "@/store";
	import { doWxlogin } from "@/api/wx.js"
	export default defineComponent({
		name: "Login",
		setup(props, ctx) {
			const userStore = useUserStore();
			// 验证码 hooks 方法 tips 提示语 ， status 状态， getVerificationCode 获取验证码方法
			const { tips, status, getVerificationCode } = useVerificationCode(60, 1000, ["获取验证码", "秒后重新获取", "重新获取",]);
			// 路由操作
			const router = useRouter();
			// 日间light、夜间dark主题
			const theme = ref("light");
			// 表单 Ref
			const formRef = ref();

			// 当前展开选项卡
			const activ = ref(2);
			/**
			 * 选项卡切换方法
			 * @param key 当前选项卡key
			 */
			const setTab = (key : number) => {
				activ.value = key;
			};
			// 表单数据对象
			const formData = ref({
				// phone: "17712152799",
				phone: "",
				code: "",
				// password: "123456",
				password: "",
			} as any);
			const protocol = ref(false); // 协议勾选状态
			// 协议勾选状态切换方法
			const checkboxChange = (e : { value : boolean }) => {
				protocol.value = e.value;
			}
			// 前往协议页面
			const goProtocolPage = () => {

			}
			// 前往注册页面
			const goRegister = () => {
				router.push("/commonPage/register/register");
			}
			const wxLogin = () => {
				if (!protocol.value) {
					uni.$wdToast.error('请阅读并同意隐私协议和用户协议')
					return;
				}
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						doWxlogin({
							code: loginRes.code, //获取到的code值
						}).then(res => {
							if (!res.token) {
								router.push({
									url: "/commonPage/register/register",
									params: { openid: res.openid },
								});
							} else {
								userStore.setToken(res.token, res.user_id);
								router.switchTab('/pages/index/index');
							}

						});
					}
				});
			}
			// 登录方法
			const doLogin = () => {
				if (!protocol.value) {
					uni.$wdToast.error('请阅读并同意隐私协议和用户协议')
					return;
				}
				formRef.value
					.validate()
					.then(({ valid, errors } : { [key : string] : any }) => {
						if (valid) {
							userStore.doLogin(formData.value);
						}
					})
					.catch((error : string) => {
					})
			}
			return {
				theme,
				activ,
				setTab,
				formData,
				protocol,
				checkboxChange,
				tips,
				status,
				formRef,
				getVerificationCode,
				goProtocolPage,
				goRegister,
				doLogin,
				wxLogin,
			}
		}
	});
</script>

<style lang="less" scoped>
	.container {
		.title {
			font-family: PingFang;
			font-weight: bold;
			font-size: 50rpx;
			color: #000000;
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			text-align: center;
		}

		.tabs {
			// margin: 0 50rpx;
			// width: calc(100% - 100rpx);
			margin: 0 auto;
			width: 600rpx;
			min-height: 265rpx;
			border-radius: 13rpx;
			position: relative;
			filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.4));

			// box-shadow: 0rpx 2rpx 42rpx 0rpx rgba(0, 0, 0, 0.06);
			.tabs-items {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tabs-item {
					width: calc(100% / 2 - 20rpx);
					text-align: center;

					font-family: PingFang;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					background: #C91C1F;
					// box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.4);
					border-radius: 28rpx;
					padding: 0 0 70rpx;

					.text {
						position: relative;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 2;
						padding: 25rpx 0 0;
					}

				}

				.activ-bg {
					display: none;
					position: absolute;
					height: 100%;
					width: calc(100% + 120rpx);
					left: 0px;
					top: -16rpx;
					// bottom: 10%;
					transform: rotateY(180deg);
				}

				.tabs-item.activ {
					color: #333333;
					position: relative;
					background-color: transparent;

					.activ-bg {
						display: inline-block;
					}

					.text::after {
						content: "";
						position: absolute;
						width: 57rpx;
						height: 3rpx;
						background: #C91C1F;
						border-radius: 2rpx;
						top: 82rpx;
					}
				}

				.tabs-item+.tabs-item.activ {
					.activ-bg {
						display: inline-block;
						transform: rotateY(0deg);
						right: 0;
						left: auto;
					}
				}



			}

			.tabs-body {
				position: relative;
				top: -24px;
				left: 0px;
				width: calc(100%);
				min-height: 200rpx;
				background: #FFF;
				padding-bottom: 24rpx;

				.form {
					padding: 24rpx 50rpx 0;

					.wd-input.is-cell {
						padding: 10px 0;
					}

					.forgot-password {
						margin-top: 40rpx;

						font-family: PingFang;
						font-weight: bold;
						font-size: 22rpx;
						color: #666666;
					}

					.submit-btn {
						margin-top: 33rpx;
						padding-bottom: 60rpx;
					}
				}


			}

			.left {
				border-radius: 0 25rpx 25rpx 25rpx;
			}

			.right {
				border-radius: 25rpx 0 25rpx 25rpx;
			}
		}

		.tripartite {
			padding: 0 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 80rpx !important;
				height: 80rpx !important;
			}
		}

		.protocol {
			padding-top: 68rpx;
			padding-bottom: 23rpx;
			text-align: center;

			:deep(.wd-checkbox) {
				.wd-checkbox__shape {
					width: 26rpx !important;
					height: 26rpx !important;
				}

				.wd-checkbox__label {
					font-family: PingFang;
					font-weight: bold;
					font-size: 22rpx;
					color: #666666;
				}

			}

			.wd-button-custom-class-link {
				font-family: PingFang;
				font-weight: bold;
				font-size: 22rpx;
			}

		}

		.register {
			font-family: PingFang;
			font-weight: bold;
			font-size: 33rpx;
			color: #666666;
			text-align: center;
			padding-bottom: 40rpx;
		}
	}
</style>